<template>
	<i-drawer v-model="showAdd" title="请选择需要添加的提现方式">
		<view class="select_item">
			<text @click="goTo('/pages/withdrawal/add_pay?status=al')">支付宝</text>
			<text @click="goTo('/pages/withdrawal/add_pay?status=bank')">银行卡</text>
		</view>
	</i-drawer>
	<i-drawer v-model="delShow" title="你确认要删除该提现方式吗" confirm_title="确认删除" @confirm="confirm"></i-drawer>
	<view class="methods">
		<view style="height: 20rpx;"></view>
		<i-card>
			<view class="methods_name">
				<text class="name">实名信息：{{realInfo.certName}}</text>
				<text>点击右下角可添加提现方式，提现信息需与实名认证信息匹配</text>
			</view>
		</i-card>
		<i-card top="20rpx" :background="item.cardTypeStr === '银行卡' ? '#44D7B6' :  '#00A0EA'" padding="40rpx 32rpx"
			v-for="item in bankList" :key="item.userCardId" @click="select(item)">
			<view class="pay_item">
				<view class="top_left">
					<image
						:src="item.cardTypeStr === '银行卡' ? '../../static/images/bank_icon.png': '../../static/images/alipay_icon.png'"
						mode=""></image>
					<view class="bank_name">
						<text class="name">{{ item.bankName || item.cardTypeStr}}</text>
						<text>{{item.cardTypeStr === '银行卡' ? '银行卡' : realInfo.certName}}</text>
					</view>
				</view>
				<i-buttons v-if="type !== 'business'" :bgColor="item.cardTypeStr === '银行卡' ? '#44D7B6' :  '#00A0EA'"
					color="#fff" border="rgba(255, 255, 255, .2)" @click="goEdit(item)">编辑
				</i-buttons>
			</view>
			<view class="number">{{item.cardTypeStr === '银行卡' ? item.bankcardNum: item.alipayPaymentAccount}}</view>
			<view class="delect">
				<i-buttons v-if="type === 'business'" bgColor="#44D7B6" color="#fff" border="rgba(255, 255, 255, .2)"
					@click="goDel(item)">删除
				</i-buttons>
			</view>

		</i-card>
		<view style="height: 40rpx;"></view>
		<view class="" style="height: 800rpx;" v-if="!bankList.length">
			<i-notData></i-notData>
		</view>
		<i-floatBut v-if="!type || (type && !bankList.length)">
			<view class="float">
				<image @click="toAdd" src="../../static/images/address_icon.png" mode="widthFix"></image>
			</view>
		</i-floatBut>
	</view>
</template>

<script lang="ts" setup>
	import {
		computed,
		reactive,
		ref
	} from 'vue';
	import {
		navTo,
		showTost
	} from '../../utils/common'
	import {
		getSelfAuth,
		getApiUserCardList,
	} from '../../api/user'
	import {
		tlDelete,
		getApiMerCashCardList
	} from '../../api/trilateral'

	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app'

	import useStore from '../../stores/index'

	const store = useStore()
	const bankList = ref<any[]>([])
	const showAdd = ref(false)
	const type = ref('')
	const delShow = ref(false)
	const activeId = ref('')

	const realInfo = reactive<{
		certId : string,
		certName : string,
		userId : string
	}>({
		certId: "",
		certName: "",
		userId: ""
	})

	const toAdd = () => {
		if (type.value) {
			navTo('/pages/withdrawal/addTl_bank', 'navigateTo')
		} else {
			showAdd.value = true
		}
	}
	const goTo = (url : string) => {
		showAdd.value = false
		navTo(url, 'navigateTo')
	}
	const goEdit = (item : {
		cardTypeStr : string,
		userCardId : string,
		id ?: string
	}) => {
		if (type.value) {
			navTo('/pages/withdrawal/addTl_bank?id=' + item.id, 'navigateTo')
			return
		}

		if (item.cardTypeStr === '银行卡') {
			navTo('/pages/withdrawal/add_pay?status=bank&userCardId=' + item.userCardId, 'navigateTo')
		} else {
			navTo('/pages/withdrawal/add_pay?status=al&userCardId=' + item.userCardId, 'navigateTo')
		}
	}
	const getList = async () => {
		const {
			data
		} = await getApiUserCardList()
		bankList.value = data
	}
	const select = (item : any) => {
		uni.$emit('changePay', item)
		uni.navigateBack()
	}

	const getTlList = async () => {
		const { data } = await getApiMerCashCardList()
		bankList.value = data.map(item => { return { ...item, cardTypeStr: '银行卡' } })
	}

	const getInfo = async () => {
		const {
			data
		} = await getSelfAuth()
		realInfo.certId = data.certId
		realInfo.certName = data.certName
		realInfo.userId = data.userId
	}
	const goDel = async (item : { id : string }) => {
		activeId.value = item.id
		delShow.value = true

	}
	const confirm = async () => {
		await tlDelete({
			id: activeId.value
		})
		showTost('删除银行卡成功', () => {
			getTlList()
		})
	}

	onLoad((option) => {
		if (option.type) {
			type.value = 'business'
		}
		getInfo()
	})
	onShow(() => {
		type.value ? getTlList() : getList()
	})
</script>

<style lang="scss" scoped>
	.methods {
		width: 100%;
		min-height: 100vh;
		overflow-x: hidden;
		background-color: $background-color;

		.methods_name {
			@include flexC;
			@include dfont(24rpx);
			color: #A0A0AD;

			.name {
				@include titlefont(32rpx);
				margin-bottom: 8rpx;
			}
		}

		.float {
			image {
				width: 104rpx;
				height: 104rpx;
			}
		}
	}

	.pay_item {
		@include flexRS;

		.top_left {
			@include flexR;

			image {
				width: 64rpx;
				height: 64rpx;
				margin-right: 24rpx;
			}

			.bank_name {
				@include flexC;
				@include dfont(24rpx);
				color: rgba(255, 255, 255, .4);

				.name {
					@include titlefont;
					color: #fff;
				}
			}
		}

	}

	.number {
		margin-top: 24rpx;
		margin-left: 88rpx;
		@include dprice(36rpx);
		color: #fff;
		@include warp;
		width: 70%;
	}

	.delect {
		width: 140rpx;
		margin-left: 88rpx;
		margin-top: 40rpx
	}

	.select_item {
		@include flexC;
		width: 100%;
		border-bottom: 15rpx solid $backColor;

		text {
			width: 100%;
			text-align: center;
			padding: 30rpx 0;
			@include dfont(32rpx);
			border-bottom: 1rpx solid $backColor;
		}

		text:active {
			background-color: rgba(243, 244, 245, 0.3);
		}
	}
</style>